<template>
  <div>
    <sui-container style="padding: 50px">
      <h2 is="sui-header">
        Step
        <a href="http://localhost:8080/" is="sui-button" style="float: right ">主页</a>
      </h2>
      <sui-divider/>
      <sui-step-group>
        <sui-step active icon="truck" title="配送" description="选择配送方式"></sui-step>
        <sui-step disabled icon="payment" title="支付" description="选择支付方式"></sui-step>
        <sui-step disabled icon="info" title="确认" description="确认订单信息"></sui-step>
      </sui-step-group>
      <sui-divider/>
      <sui-step-group fluid>
        <sui-step active icon="truck" title="配送" description="选择配送方式"></sui-step>
        <sui-step disabled icon="payment" title="支付" description="选择支付方式"></sui-step>
        <sui-step disabled icon="info" title="确认" description="确认订单信息"></sui-step>
      </sui-step-group>
      <sui-divider/>
      <sui-step-group size="large" step-number="three">
        <sui-step active icon="truck" title="配送" description="选择配送方式"></sui-step>
        <sui-step disabled icon="payment" title="支付" description="选择支付方式"></sui-step>
        <sui-step disabled icon="info" title="确认" description="确认订单信息"></sui-step>
      </sui-step-group>
      <sui-divider/>
      <sui-step-group ordered step-number="three">
        <sui-step active completed title="配送" description="选择配送方式"></sui-step>
        <sui-step disabled title="支付" description="选择支付方式"></sui-step>
        <sui-step disabled title="确认" description="确认订单信息"></sui-step>
      </sui-step-group>
    </sui-container>
  </div>
</template>

<script>
export default {
  name: 'Step'
}
</script>

<style scoped>

</style>
